{{template "admin/header"}}
<div class="mdui-typo crumbs row">
  <h1>添加文章</h1>
  <div>
    <a href="/admin/" class="">
      <i class="mdui-icon material-icons">home</i>首页</a
    >
    <span> /</span>
    <a href="/admin/post">文章列表</a>
    <span> /</span>
    <span>添加文章</span>
  </div>
</div>
<div class="row">
  <form
    action=""
    method="POST"
    style="width: 30%; min-width: 400px;"
    class="col mdui-col-sm-4"
    id="form"
  >
    <div>
      <img data-src="holder.js/320x160" style="width: 100%;" alt="" />
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">文章标题</label>
      <input
        class="mdui-textfield-input"
        type="text"
        placeholder="输入文章标题"
        required
        name="title"
        maxlength="30"
      />
      <div class="mdui-textfield-error">输入文章标题</div>
    </div>

    <div class="mdui-textfield">
      <label class="mdui-textfield-label">文章简介</label>
      <textarea
        class="mdui-textfield-input"
        placeholder="输入文章简介"
        name="desc"
      ></textarea>
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">作者</label>
      <input
        class="mdui-textfield-input"
        type="text"
        placeholder="输入作者"
        name="author"
        required
      />
      <div class="mdui-textfield-error">作者不可空</div>
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">作者邮箱</label>
      <input
        class="mdui-textfield-input"
        type="email"
        placeholder="请输入作者邮箱"
        name="email"
        required
      />
      <div class="mdui-textfield-error">作者邮箱不可空</div>
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">Tag</label>
      <input
        class="mdui-textfield-input"
        placeholder="请输入文章标签"
        type="text"
        name="tag"
      />
      <div class="mdui-textfield-helper">逗号分割</div>
    </div>
    <div class="row">
      <button
        type="submit"
        class="mdui-btn mdui-color-theme-accent mdui-ripple"
      >
        提交
      </button>
    </div>
  </form>
  <div style="flex: 1; margin-left: 20px;">
    <script
      id="editor"
      type="text/plain"
      style="width: 100%; height: 500px;"
    ></script>
  </div>
</div>

<script
  type="text/javascript"
  charset="utf-8"
  src="/static/ueditor/ueditor.config.js"
></script>
<script
  type="text/javascript"
  charset="utf-8"
  src="/static/ueditor/ueditor.all.min.js"
></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script
  type="text/javascript"
  charset="utf-8"
  src="/static/ueditor/lang/zh-cn/zh-cn.js"
></script>
<script>
  //实例化编辑器
  //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  var ue = UE.getEditor('editor');
</script>
<script>
  // 提交表单
  const form = document.getElementById('form');
  form.onsubmit = submit;
  function submit(e) {
    e.preventDefault();
    let data = params2JSON($$(e.target).serialize());
    data.tag = data.tag.split(',');
    console.log(data);

    $$.ajax({
      method: 'post',
      dataType: 'json',
      url: '',
      data: JSON.stringify(data),
      contentType: 'application/json',
    });
  }
</script>
{{template "admin/footer"}}
